<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script>
// Based on http://philip.html5.org/tests/canvas/suite/tests/2d.pattern.modify.canvas1.html

function pixelShouldBe(ctx, x, y, color) {
    assert_array_equals(ctx.getImageData(x, y, 1, 1).data, color);
}

function createCanvasImage(width, height, color) {
    var c = document.createElement("canvas");
    c.width = width;
    c.height = height;
    var context = c.getContext("2d");
    context.fillStyle = color;
    context.fillRect(0, 0, width, height);
    return c;
}

test(function(t) {
    var canvas = createCanvasImage(100, 50, '#fff');
    var ctx = canvas.getContext('2d');
    
    var patternCanvas = createCanvasImage(100, 50, '#0f0');
    var pattern = ctx.createPattern(patternCanvas, 'no-repeat');
    
    // Modify the original canvas after we create a pattern.
    var patternCtx = patternCanvas.getContext('2d');
    patternCtx.fillStyle = '#f00';
    patternCtx.fillRect(0, 0, 100, 50);
    
    ctx.fillStyle = pattern;
    ctx.fillRect(0, 0, 100, 50);
    
    pixelShouldBe(ctx, 1, 1, [0, 255, 0, 255]);
    pixelShouldBe(ctx, 98, 1, [0, 255, 0, 255]);
    pixelShouldBe(ctx, 1, 48, [0, 255, 0, 255]);
    pixelShouldBe(ctx, 98, 48, [0, 255, 0, 255]);
}, "This test checks if pattern changes after the source canvas is modified. See https://bugs.webkit.org/show_bug.cgi?id=20578 .");
</script>
